<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<!-- <view class="nav-bar">
			<uni-icons type="back" size="24" @click="goBack" />
			<text class="nav-title">基本信息</text>
		</view> -->

		<!-- 信息列表 -->
		<view style="padding-top:40rpx;"></view>
		<view class="info-card">
			<uni-list>
				<uni-list-item title="头像" clickable @click="editIcon">
					<template v-slot:footer>
						<image :src="user.avatar" class="avatar" mode="aspectFill"></image>
					</template>
				</uni-list-item>
				<uni-list-item title="姓名" :rightText="user.name" clickable @click="openNamePopup" />
				<uni-list-item title="电话信息" :rightText="user.phone" clickable @click="openPhonePopup" />
				<uni-list-item title="修改密码" clickable @click="openPasswordPopup" />
			</uni-list>
		</view>

		<!-- 退出按钮 -->
		<view class="logout-wrapper">
			<button class="logout-btn" @click="logout">退出登录</button>
		</view>

		<!-- 修改密码弹窗 -->
		<uni-popup ref="passwordPopup" type="center">
			<view class="popup-content">
				<view class="popup-title">修改密码</view>

				<input class="input" type="password" v-model="form.oldPassword" placeholder="请输入原始密码" />
				<input class="input" type="password" v-model="form.newPassword" placeholder="请输入新密码" />
				<input class="input" type="password" v-model="form.confirmPassword" placeholder="请再次确认新密码" />

				<view class="btn-group">
					<button class="cancel-btn" @click="closePasswordPopup">取消</button>
					<button class="confirm-btn" @click="submitPassword">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 修改姓名弹窗 -->
		<uni-popup ref="namePopup" type="center">
			<view class="popup-content">
				<view class="popup-title">修改姓名</view>

				<input class="input" v-model="form.name" placeholder="请输入新姓名" />

				<view class="btn-group">
					<button class="cancel-btn" @click="closeNamePopup">取消</button>
					<button class="confirm-btn" @click="submitName">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 修改手机号弹窗 -->
		<uni-popup ref="phonePopup" type="center">
			<view class="popup-content">
				<view class="popup-title">修改电话信息</view>

				<input class="input" v-model="form.phone" placeholder="请输入新手机号" />

				<view class="btn-group">
					<button class="cancel-btn" @click="closePhonePopup">取消</button>
					<button class="confirm-btn" @click="submitPhone">确定</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="editIconPopup" type="center">
			<view class="popup">
				<text class="popup-title">修改图标</text>
				<fileUploader :limitsize="10240" :maxcount="1" @get-img="getImg" v-if="showModal"></fileUploader>
				<view class="popup-buttons">
					<button class="cancel-btn" @tap="hideEditIconPopup">取消</button>
					<button class="confirm-btn" @tap="submitEditIcon">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModal: true,
				user: {
					avatar: '/static/avatar.png',
					name: '灵魂摆渡人',
					phone: '13212345678',
				},
				form: {
					avatar: '',
					oldPassword: '',
					newPassword: '',
					confirmPassword: '',
					name: '',
					phone: '',
				},
			};
		},
		methods: {
			getImg(data) {
				this.form.avatar = data[0]; // fileUploader 返回的本地路径
			},
			showEditIconPopup() {
				this.form.avatar = '';
				this.$refs.editIconPopup.open();
				// this.showModal = true;
			},
			hideEditIconPopup() {
				this.$refs.editIconPopup.close();
				// this.showModal = false;
			},
			editIcon() {
				this.showEditIconPopup();
			},
			async submitEditIcon() {
				if (!this.form.avatar) {
					return uni.showToast({
						title: '请先上传',
						icon: 'none'
					});
				}
				const uploadRes = await this.$lib.$http.post({
					url: this.$lib.$urlMap.updateAvatar,
					data: {
						avatar: this.form.avatar  // 这里是字符串，不是文件路径
					},
					needLogin: true
				});
				if (uploadRes.code === 1) {
					// this.project.icon = uploadRes.data.url;
					uni.showToast({ title: '修改成功', icon: 'success' });
					this.hideEditIconPopup();
				} else {
					uni.showToast({ title: uploadRes.msg || '上传失败', icon: 'none' });
				}
			},
			goBack() {
				uni.navigateBack();
			},

			// 修改密码
			openPasswordPopup() {
				// this.$refs.passwordPopup.open();
				uni.navigateTo({
					url: '/pages/login/changePwd'
				})
			},
			closePasswordPopup() {
				this.$refs.passwordPopup.close();
			},
			submitPassword() {
				const {
					oldPassword,
					newPassword,
					confirmPassword
				} = this.form;
				if (!oldPassword || !newPassword || !confirmPassword) {
					return uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
				}
				if (newPassword !== confirmPassword) {
					return uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
				}
				uni.showToast({
					title: '修改成功',
					icon: 'success'
				});
				this.closePasswordPopup();
				this.form.oldPassword = this.form.newPassword = this.form.confirmPassword = '';
			},

			// 修改姓名
			openNamePopup() {
				this.form.name = this.user.name;
				this.$refs.namePopup.open();
			},
			closeNamePopup() {
				this.$refs.namePopup.close();
			},
			async submitName() {
				if (!this.form.name.trim()) {
					return uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					});
				}
				this.user.name = this.form.name.trim();
				const res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.updateName,
					data: {
						staff_name: this.user.name
					},
					needLogin: true
				});
				if (res.code === 1) {
					this.user.name = this.form.name;
					// uni.showToast({
					// 	title: '修改成功',
					// 	icon: 'success'
					// });
					this.closeNamePopup();
				} else {
					uni.showToast({
						title: res.msg || '修改失败',
						icon: 'none'
					});
				}
			},

			// 修改电话
			openPhonePopup() {
				this.form.phone = this.user.phone;
				this.$refs.phonePopup.open();
			},
			closePhonePopup() {
				this.$refs.phonePopup.close();
			},
			async submitPhone() {
				const phoneRegex = /^1\d{10}$/;
				if (!phoneRegex.test(this.form.phone)) {
					return uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					});
				}
				this.user.phone = this.form.phone;
				const res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.updatePhone,
					data: {
						phone: this.user.phone
					},
					needLogin: true
				});
				if (res.code === 1) {
					this.user.phone = this.form.phone;
					// uni.showToast({
					// 	title: '修改成功',
					// 	icon: 'success'
					// });
					this.closePhonePopup();
				} else {
					uni.showToast({
						title: res.msg || '修改失败',
						icon: 'none'
					});
				}
			},

			// 退出登录
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.$lib.$store.commit('clearUserInfo')
							// this.$lib.$store.commit('setUserInfo','')
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}
					},
				});
			},
		},
	};
</script>

<style scoped>
	.popup {
		width: 600rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;
		border-radius: 30rpx;
	}

	.popup-title {
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.popup-input {
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.popup-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.container {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		padding: 30rpx;
		/* background-color: #fff; */
		/* border-bottom: 1px solid #eee; */
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.info-card {
		margin: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.logout-wrapper {
		margin-top: 100rpx;
		padding: 0 60rpx;
	}

	uni-button::after {
		content: none !important;
		display: none !important;
	}

	.logout-btn {
		/* width: 706rpx; */
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		/* border: 1rpx solid #ccc; */
	}

	/* 弹窗通用样式 */
	.popup-content {
		background-color: #fff;
		padding: 40rpx 30rpx;
		border-radius: 32rpx;
		width: 600rpx;
	}

	.popup-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.input {
		background-color: #f7f7f7;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		font-size: 28rpx;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
	}

	.cancel-btn {
		width: 45%;
		background-color: #f8f8f8;
		color: #000;
	}

	.confirm-btn {
		width: 45%;
		background-color: #000;
		color: #fff;
	}
</style>